<!-- 右侧浮动按钮组 -->
<template>
<div class="frBtns" v-show="goTopShow">
    <ul class="list">
        <li v-for="(item,index) in listFilter" :key="index" class="list_i">
            <!-- 带链接 -->
            <a :href="item.link" v-if="item.isLink" class="list_i_link">
                {{item.title}}
            </a>
            <!-- 返回顶部 -->
            <span v-else class="list_i_2top" @click="goTop">
                <p><i class="el-icon-arrow-up icon"></i></p>
                <p class="txt">{{item.title}}</p>
            </span>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    computed: {
        listFilter() {
            return this.list.filter(item => {
                return item.isShow
            })
        }
    },
    data() {
        return {
            list: [
                {
                    title: '返回顶部',
                    link: '/',
                    isShow: true
                },
            ],
            scrollTop: 0,
            goTopShow: false,
            qrCodeObj: {},
            link: ''
        }
    },
    watch: {
        scrollTop(val) {
            if (this.scrollTop > 300) {
                this.goTopShow = true;
            } else {
                this.goTopShow = false;
            }
        }
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
        // this.getConfigFun()
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        handleScroll() {
            this.scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            if (this.scrollTop > 500) {
                this.goTopShow = true;
            }
        },
        goTop() {
            let timer = null,
                _that = this;
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(function fn() {
                if (_that.scrollTop > 0) {
                    _that.scrollTop -= 1000;
                    document.body.scrollTop = document.documentElement.scrollTop =
                        _that.scrollTop;
                    timer = requestAnimationFrame(fn);
                } else {
                    cancelAnimationFrame(timer);
                    _that.goTopShow = false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
p {
    margin: 0;
}

.frBtns {
    $ca: #6dadf2;
    $c: #E1E1E1;
    position: fixed;
    bottom: 10%;
    right: 20px;
    width: 60px;
    background-color: #fff;
    border: 1px solid $c;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .16);
    z-index: 9999;
    border-radius: 2px;

    .list {

        // 列表项
        &_i {
            margin: 0 5px;
            display: flex;
            justify-content: center;

            &:not(:last-child) {
                border-bottom: 1px solid $c;
            }

            &_link,
            &_code,
            &_2top {
                font-size: 14px;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }

            &_link,
            &_code {
                width: 30px;

                &:hover {
                    color: $ca;
                }
            }

            // 链接
            &_link {}

            // 二维码
            &_code {
                position: relative;

                &:hover {
                    .codeBox {
                        display: block
                    }
                }

                .codeBox {
                    background-color: #fff;
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .16);
                    display: none;
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    right: 50px;
                    top: 0;
                    padding: 10px;

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            // 返回顶部
            &_2top {
                color: $ca;
                display: flex;
                flex-direction: column;
                font-size: 12px;

                .icon {
                    font-size: 30px;
                }
                &:hover{
                    font-weight: bold
                }
            }
        }
    }
    @media (min-width:768px) and (max-width:1280px) {
        width: 50px;

        .list {
            &_i {

                &_link,
                &_code,
                &_2top {
                    height: 50px;
                    font-size:12px;
                }
                &_code{
                    padding-left: 5px;
                }
            }
        }
    }
    @media (max-width:767px) {
        top: auto;
        bottom: 5%;
    }
}
</style>
